<!-- 立体偏振  支持摄像机自动飞行 + 一次性 3D 提示 + 重置提示按钮  功能待测试 暂不可用-->
<template>
  <div class="stereo-control">
    <el-button-group>
      <el-button
        v-for="option in stereoOptions"
        :key="option.value"
        :type="selected === option.value ? 'primary' : 'default'"
        size="small"
        @click="changeStereoMode(option.value)"
      >
        {{ option.label }}
      </el-button>
    </el-button-group>

    <el-button type="info" size="small" plain style="margin-left: 8px" @click="resetStereoHint">重置提示</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ElMessageBoxOptions } from 'element-plus';
import { SuperMap3D } from '@/utils/supermap3d';

//  StereoViewType 替代值
const STEREO_NONE = 0;
const STEREO_LEFT_RIGHT = 1;
const STEREO_TOP_BOTTOM = 2;
const STEREO_ANAGLYPH = 3;

const selected = ref<number>(STEREO_NONE);
const STEREO_HINT_KEY = 'stereo_3d_hint_shown';

// 替换为你实际创建的 viewer 实例方式
const { __viewer } = window;
const viewer = __viewer;
// 立体视图选项
const stereoOptions = [
  { label: '关闭立体', value: STEREO_NONE },
  { label: '左右格式', value: STEREO_LEFT_RIGHT },
  { label: '上下格式', value: STEREO_TOP_BOTTOM },
  { label: '红蓝格式', value: STEREO_ANAGLYPH },
];
const changeStereoMode = (value: number) => {
  viewer.scene.shadowMap.darkness = 1.275; //设置第二重烘焙纹理的效果（明暗程度）
  viewer.scene.debugShowFramesPerSecond = false;
  viewer.scene.hdrEnabled = false;
  viewer.scene.sun.show = true;
  viewer.scene.useWebVR = true;

  selected.value = value;
  viewer.scene.screenSpaceCameraController.enableStereo = value !== STEREO_NONE;
  viewer.scene.stereoViewType = value;

  if (value !== STEREO_NONE) {
    flyToStereoView();
    showStereoModeHintOnce();
  }
};

// 切换立体模式后飞行视角
const flyToStereoView = () => {
  viewer.camera.flyTo({
    destination: SuperMap3D.Cartesian3.fromDegrees(116.391, 39.907, 3000),
    orientation: {
      heading: SuperMap3D.Math.toRadians(0),
      pitch: SuperMap3D.Math.toRadians(-30),
      roll: 0,
    },
    duration: 2,
  });
};

// 仅首次提示佩戴眼镜   加上localStorage判断逻辑来是的只有首次使用会提示
const showStereoModeHintOnce = () => {
  const alreadyShown = localStorage.getItem(STEREO_HINT_KEY);
  if (alreadyShown) return;

  ElMessageBox.alert('请确保您的显示器支持3D模式，并佩戴3D眼镜以获得立体视觉效果。', '立体视图提示', {
    confirmButtonText: '我已了解',
    type: 'info',
    showClose: false,
    center: true,
    draggable: true,
  } as ElMessageBoxOptions)
    .then(() => {
      localStorage.setItem(STEREO_HINT_KEY, 'true');
    })
    .catch(() => {
      localStorage.setItem(STEREO_HINT_KEY, 'true');
    });
};

// 重置提示按钮逻辑
const resetStereoHint = () => {
  viewer.scene.useWebVR = false;
  localStorage.removeItem(STEREO_HINT_KEY);
  ElMessage.success('已重置立体视图提示，下次将重新弹出提示框。');
};

// 启动时检测 WebGL支持,  使用原生WebGL检测方式
const checkStereoSupport = () => {
  try {
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    if (gl && gl instanceof WebGLRenderingContext) {
      ElMessage({
        message: '设备支持 WebGL，可体验立体模式。',
        type: 'success',
      });
    } else {
      throw new Error();
    }
  } catch (e) {
    ElMessage({
      message: '当前设备或浏览器不支持 WebGL，立体模式不可用。',
      type: 'error',
    });
  }
};

onMounted(() => {
  checkStereoSupport();
  viewer.scene.screenSpaceCameraController.enableStereo = false;
  viewer.scene.stereoViewType = STEREO_NONE;
});
</script>

<style scoped>
.stereo-control {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  padding: 6px 12px;
  border-radius: 12px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
}
</style>
